<script setup lang="ts">
import { Icon, type IconProps } from '@iconify/vue';
import { computed, mergeProps, useAttrs } from "vue";
import { calcNumberPx, calcNumberDeg } from "@/utils";
defineOptions({
  name: 'w-icon',
  inheritAttrs: false,
})

declare interface Props extends IconProps {
  size?: number|string
}

const props = withDefaults(defineProps<Props>(),{
  size: 18
})
const attrs = useAttrs()
const isClassIcon = computed(() => {
  if (typeof props.icon === 'string') {
    const iconName = props.icon.toString();
    return iconName.startsWith('i-') || iconName.startsWith('icon-');
  } else {
    return false;
  }
});
const iconStyle = computed<any>(()=>{
  return isClassIcon.value ? mergeProps({
    fontSize: calcNumberPx(props.size),
    color: props.color,
    transform: `rotate(${calcNumberDeg(props.rotate)})`
    // @ts-ignore
  }, attrs?.style || {}): {}
})
const className = computed(()=>{
  return isClassIcon.value?['w-icon anticon',props.icon]: 'w-icon anticon';
})

</script>

<template>
  <span :class="className"  v-bind="$attrs" :style="iconStyle">
    <Icon v-bind="props" v-if="!isClassIcon"/>
  </span>
</template>

<style lang="scss" scoped>

</style>